<template>
  <div v-loading="load">
    <window-title title="签到列表">
      <el-button
        size="mini"
        style="float:right"
        class="com-btn"
        icon="el-icon-back"
        @click="back()"
      >返回</el-button>
    </window-title>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="0">
        <span slot="label">
          全部
          <span class="tab-badge">{{all}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="1">
        <span slot="label">
          已签到
          <span class="tab-badge">{{check_real}}</span>
        </span>
      </el-tab-pane>
    </el-tabs>
    <el-table size="small" :header-cell-style="{background:'#f1f1f1'}" :data="list.data">
      <el-table-column type="index"></el-table-column>
      <el-table-column label="姓名" prop="form[0].value"></el-table-column>
      <el-table-column label="手机号" prop="form[1].value"></el-table-column>
      <el-table-column label="组别" prop="team_name">
        <template slot="header" slot-scope="scope">
          <el-dropdown size="mini" @command="changeTeam" style="padding-top:5px;">
            <span class="el-dropdown-link" style="font-weight:normal;font-size:12px;">
              {{group_index == 0 ? '组别' : team_list[group_index].name}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item,key) in team_list" :command="item.id">{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <!-- <el-table-column label="金额" prop="total_price"></el-table-column> -->
      <el-table-column label="数字票码" prop="code"></el-table-column>
      <el-table-column label="状态" width="80px">
        <template slot-scope="item">
          <el-tag size="mini" type="danger" v-if="item.row.checked == 0">未签到</el-tag>
          <el-tag size="mini" type="success" v-if="item.row.checked == 1">已签到</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="验票时间" prop="sign_time" width="150px"></el-table-column>
      <el-table-column label="来源">
        <template slot-scope="item">
          <el-tag v-if="item.row.source == 1" size="small" type="success">小程序</el-tag>
          <el-tag v-if="item.row.source == 2" size="small" type="success">H5</el-tag>
          <el-tag v-if="item.row.source == 3" size="small" type="success">团报</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        background
        small
        :current-page="list.current_page"
        :page-size="list.per_page"
        layout="total, prev, pager, next, jumper"
        :total="list.total"
        @current-change="changePage"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import windowTitle from "../../../components/unit/title.vue";

export default {
  props: { active_id: {} },
  components: { windowTitle },
  data() {
    return {
      activeName: "0",
      list: {
        current_page: 1,
        data: []
      },
      all: 0,
      check_real: 0,
      load: true,
      group_id: 0,
      group_index : 0,
      team_list: []
    };
  },
  mounted() {
    this.getData();
    this.getTeamInfo();
  },
  methods: {
    //改变组别
    changeTeam(e){
      this.group_id = e;

      for(var i in this.team_list){
        if(this.team_list[i].id == e) this.group_index = i;
      }
      this.list.current_page = 1;
      this.getData();
    },
    //获取活动组别信息
    getTeamInfo() {
      this.ajaxs("active/getTeamInfo", {
        data: { active_id: this.active_id },
        success: res => {
          this.team_list = res.msg;
          this.team_list.unshift({name : '全部' , 'id' : 0});
        }
      });
    },
    changePage(e) {
      this.list.current_page = e;
      this.getData();
    },
    //返回
    back() {
      this.$emit("back");
    },
    //获取数据
    getData() {
      this.load = true;
      this.ajaxs("activesign/signList", {
        data: {
          active_id: this.active_id,
          page: this.list.current_page,
          activeName: this.activeName,
          group_id : this.group_id
        },
        success: res => {
          console.log(res);
          this.list = res.msg.list;
          this.all = res.msg.all;
          this.check_real = res.msg.check_real;
          this.load = false;
        }
      });
    },
    //切换TAB
    handleClick() {
      this.list.current_page = 1;
      this.getData();
    }
  }
};
</script>

<style>
</style>